<template>
  <view class="container">
    <view class="header">
      <text class="title">健农进销存</text>
    </view>
    <view class="form-container">
      <view class="form-item">
        <input type="text" placeholder="请输入您的账号" style="width: 95%;"  v-model="Login.accouny"/>
      </view>
      <view class="form-item">
        <input type="password" placeholder="请输入您的密码" style="width: 95%;" v-model="Login.password" />
      </view>
      <button class="login-button" @click="login">登录</button>
      <view class="link-container">
        <text class="forgot-password">忘记密码</text>
        <text class="register-account" @click="toRigist">注册账号</text>
      </view>
    </view>
	<div>{{error}}</div>
  </view>
</template>

<script setup>
// 这里可以添加一些脚本逻辑，比如表单验证等

import { reactive, ref } from 'vue';
import { TokenStore } from '../../Store/TokenStore';
import { config } from '../../config';

let Login = reactive({
	accouny:'',
	password:'',
	ip:''
})

let error = ref('')

//点击登录按钮事件
async function login(){
	
	if(Login.accouny === '' || Login.password === ''){
		uni.showToast({
		  title: '请填写所有字段',
		  icon: 'error'
		});
	}
	else {
		uni.request({
		  url: 'https://ipinfo.io/json',
		  success: function(res) {
		    var ip = res.data.ip;
		    console.log('IP地址：', ip);
			Login.ip = ip;
		  }
		});
		
		uni.request({
			url:`${config.baseURL}/User/Login`,
			method:'POST',
			data:Login,
			header: {
				'content-type': 'application/json' // 设置请求头为 JSON
			},
			success:(res)=>{
				
				//请求成功
				console.log(res.data.data);
				if(res.data.data === '0'){
					uni.showToast({
					  title: '账号或密码错误',
					  icon: 'error'
					});
				}
				else if(res.data.data === 'error'){
					uni.showToast({
					  title: '数据库错误'+res.statusCode,
					  icon: 'error'
					});
				}
				else {
					uni.showToast({
					  title: '登录成功',
					  icon: 'success'
					});
					TokenStore().settoken(res.data.data);
					console.log("获取令牌"+res.data.data);
					uni.switchTab({
						url:'/pages/MyIndex/MyIndex'
					})
				}
			},
			fail:(err)=>{
				//请求失败
				console.log("请求失败"+err)
				uni.showToast({
				  title: err.errMsg,
				  icon: 'error'
				});
			}
		});
	}
}

//点击注册按钮事件 
function toRigist(){
  uni.navigateTo({
	url: '/pages/Rigister/Rigister' // 跳转的目标页面路径
  });
}

</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f2f2f2;
}

.header {
  margin-bottom: 40px;
}

.title {
  font-size: 40px;
  font-weight: bold;
  color: #333;
}

.form-container {
  width: 90%;
  max-width: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 15px;
}

.form-item input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.login-button {
  width: 100%;
/*  padding: 10px; */
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  height: 40px;
/*  margin-top: 10px; */
}

.link-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.forgot-password, .register-account {
  cursor: pointer;
}
</style>